<template>
  <div id="list">

    <el-row>
      <el-button class="appear" size='small' @click="toJump" >
        上报</el-button>
        <el-button class="appear" size='small' 
        @click="jumpEcharts" >显示图表</el-button>
    </el-row>
    <div class="tableDiv">
    <!-- :data对象是一个数组 -->
      <el-table :data="form" style="width: 100%"  stripe border >
        <el-table-column type='index' label="序号" width="100 ">
        </el-table-column>
        <el-table-column prop="country" label="国" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省" width="140">
        </el-table-column>
        <el-table-column prop="city" label="市" width="140">
        </el-table-column>
         <el-table-column prop="area" label="区" width="140">
        </el-table-column>
        <el-table-column prop="confirmed" label="新增确诊" width="90">
        </el-table-column>
        <el-table-column prop="suspected" label="疑似" width="80">
          <template slot-scope="scope">
            <el-tag size="small" >{{ scope.row.suspected }}</el-tag> 
          </template>
        </el-table-column>
         <el-table-column prop="dead" label="死亡" width="80">
          <template slot-scope="scope">
            <el-tag size="small" type="info">{{ scope.row.dead }}</el-tag> 
          </template>
        </el-table-column>
       <el-table-column prop="cure" label="治愈" width="80">
          <template slot-scope="scope">
            <el-tag size="small" type="success">{{ scope.row.cure }}</el-tag> 
          </template>
           </el-table-column>
        <el-table-column prop="severe" label="重症" width="90">
          <template slot-scope="scope">
            <el-tag size="small" type="danger">{{ scope.row.severe }}</el-tag> 
          </template>
           </el-table-column>
           
        <el-table-column prop="outside" label="境外输入" width="90">
        </el-table-column>
        <el-table-column label="上报时间" width="110">
          <template slot-scope="scope">
                <!-- <span style="margin-left: 10px">{{ scope.row.publishTime }}</span> -->
                
                    <!-- 将时间戳改为正常时间 -->
                    {{ moment(scope.row.inputTime).format('YYYY-MM-DD')}}
                
            </template>
          
        </el-table-column>
     </el-table>
     <div class="contentPage">
          <el-pagination @current-change='currentChange' layout="prev, pager, next" :total="total"
          background small>
          </el-pagination>
        </div>  
     </div>
  </div>
</template>

<script>
let moment = require('moment');
import axios from "../utils/request";
// import Bus from '../utils/bus'
export default {
  data() {
    return {
      form:[],
      // activs:'',
      total:0,
      pageParam:{
        page:1,
        pageSize:10,
      }
    };
  },
  computed: {},
  methods: {
    currentChange(val){
      this.pageParam.page = val;
      this.pageQuery();},
    moment,
    toJump(){
      this.$router.push('/up');
      //  sessionStorage.setItem('active','/up');
      // Bus.$emit('active','/up');
    },
    jumpEcharts(){
      this.$router.push('/drawlist');

    },
    async pageQuery(){
      let res = await axios.get('/epidemic/pageQuery',{params:this.pageParam})
      this.form = res.data.list;
      // console.log(res.list);
      this.total = res.data.total;
    }
  },
  created() {
    this.pageQuery();
    this.$route.query;

  },
  mounted() {}
};
</script>
<style scoped>

.appear{
  background-color: #2cb5ac;
  box-shadow:0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  color: white;
  /* height:600px; */
}
.tableDiv{
  text-align: center;
  margin-top: 10px;
  height:600px;
}

</style>